import React from 'react'
import { useSelector ,useDispatch } from 'react-redux';
import { Swiper,Image,Grid,ProductCard, Tag, Button,Tabs  } from 'react-vant';
import { STORETYPE,PROPSTYPE ,TABBTN} from '../../Type/Store.d';
import ChildrenItem from '../../Compoment/ChildrenItem';
import SumChildren from '../../Compoment/SumChildren';
function JingX() {
    const list = useSelector((state:STORETYPE)=>state.list);
    const childrenList = useSelector((state:STORETYPE)=>state.childrenList);
    const Dispatch = useDispatch();
    const arr = ['男频','女频','完结']
    return (
        <div className='JingX'>
            <div className="demo-swiper">
                <Swiper slideSize={50} loop={true} autoplay={2000}>
                    {
                        list.map((item,index)=>{
                            return <Swiper.Item key={index}>
                                <Image width="100%" height="120" src={item.src} />
                            </Swiper.Item>
                        })
                    }
                </Swiper>
            </div>
            <Grid columnNum={3} >
                {
                    arr.map((item,index)=>{
                        return <Grid.Item text={item} key={index}/>
                    })
                }
            </Grid>
            <h4>重磅推荐</h4>
            <div>
                {
                    list.map((item,index)=>{
                        // return <ProductCard key={index}
                        //             tag="精品"
                        //             desc={item.con}
                        //             title={item.txt}
                        //             tags={ <>
                        //                     <Tag plain type="warning" style={{ marginRight: 5 }}> {item.sex} </Tag>
                        //                     <Tag plain type="danger"> {item.type} </Tag>
                        //                 </> }
                        //             thumb={item.src}
                        //         />
                        return <SumChildren item={item} key={index}></SumChildren>
                    })
                }
            </div>
            <h4>男生爱看</h4>
            <div>
                <Tabs active={0} onChange={(e)=>{
                    Dispatch({
                        type:TABBTN,
                        payload:e
                    })
                }}>
                    {list.map((item,index) => (
                        <Tabs.TabPane key={index} title={item.title}>
                            <ChildrenItem></ChildrenItem>
                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>
        </div>
    )
}

export default JingX